Elemen Semantic HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

Elemen semantik HTML adalah elemen HTML yang memiliki makna atau arti yang spesifik dan jelas untuk memudahkan mesin pencari dan pengembang web memahami struktur halaman web. Elemen semantik HTML juga membantu meningkatkan aksesibilitas dan pengalaman pengguna pada halaman web.

Contoh layout web dengan menerapkan elemen semantic.

elemen semantic html Gambar 1. layout dengan menerapkan elemen semantic

Elemen semantik HTML yang dapat digunakan antara lain:

<header>: Elemen <header> digunakan untuk menunjukkan bagian atas halaman web atau bagian kepala. Elemen ini biasanya berisi logo, judul halaman, navigasi, atau elemen lain yang mendefinisikan bagian atas halaman.
<nav>: Elemen <nav> digunakan untuk menunjukkan bagian navigasi pada halaman web. Elemen ini biasanya berisi tautan atau menu navigasi ke bagian-bagian lain dari halaman web atau ke halaman web lain.
<article>: Elemen <article> digunakan untuk menunjukkan konten yang mandiri dan dapat berdiri sendiri pada halaman web. Elemen ini biasanya berisi konten seperti artikel, posting blog, atau berita.
<section>: Elemen <section> digunakan untuk menunjukkan bagian dari halaman web yang saling terkait secara tematik atau topik. Elemen ini dapat digunakan untuk memecah halaman web menjadi beberapa bagian yang lebih kecil dan lebih mudah dibaca.
<aside>: Elemen <aside> digunakan untuk menunjukkan konten yang berhubungan dengan halaman web tetapi bukan bagian dari konten utama. Elemen ini biasanya berisi iklan, tautan terkait, atau informasi tambahan.
<details>: Elemen <details>digunakan untuk membuat daftar informasi terperinci yang dapat diperluas atau disingkat pada halaman web. Tag ini berisi teks atau elemen HTML lainnya yang mungkin atau mungkin tidak terlihat pada awalnya, dengan tanda tambah (+) atau kurang (-) yang memungkinkan pengguna untuk membuka atau menutup konten yang tersembunyi.
<summary>: Elemen <summary> digunakan sebagai judul untuk konten yang tersembunyi dalam tag <details>. Elemen ini menampilkan teks yang dapat diklik untuk membuka atau menutup konten terperinci.
<section>: Elemen <section> digunakan untuk mengelompokkan konten yang terkait secara tematik di dalam halaman web. Elemen ini biasanya digunakan untuk membagi halaman menjadi bagian-bagian yang berbeda, seperti bagian pengenalan, bagian fitur, bagian harga, dan sebagainya.
<main>: Elemen <main> digunakan untuk menunjukkan konten utama atau inti dari halaman web. Elemen ini biasanya digunakan untuk menandai area utama dari halaman web, dan seharusnya hanya digunakan satu kali di setiap halaman.
<footer>: Elemen <footer> digunakan untuk menunjukkan footer atau bagian bawah dari halaman web. Elemen ini biasanya digunakan untuk menambahkan informasi tambahan atau tautan di bagian bawah halaman, seperti tautan ke halaman terkait, hak cipta, dan sebagainya.
<figure>: Elemen <figure> digunakan untuk menampilkan konten yang memiliki keterkaitan satu sama lain, seperti gambar dan keterangan, diagram dan keterangan, atau video dan keterangan. Elemen ini biasanya digunakan untuk menunjukkan sebuah objek yang memerlukan penjelasan atau deskripsi tambahan.
<figcaption>: Elemen <figcaption> digunakan untuk memberikan deskripsi atau keterangan pada konten yang ditampilkan di dalam elemen <figure>. Elemen ini biasanya digunakan sebagai anak elemen dari elemen <figure>.
<time>: Elemen <time> digunakan untuk menunjukkan informasi waktu atau tanggal pada halaman web. Elemen ini memungkinkan kita untuk menampilkan informasi waktu secara terstruktur dan mudah dibaca oleh mesin pencari dan pengguna.

Contoh penggunaan:

Elemen <header> HTML

<header>
  <img src="logo.png" alt="Logo Situs">
  <h1>Ini adalah judul situs</h1>
  <p>Ini adalah deskripsi singkat tentang situs.</p>
  <nav>
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </nav>
</header>

Pada contoh di atas, elemen <header> menunjukkan bagian dari halaman web yang berisi logo situs, judul situs, deskripsi singkat tentang situs, dan menu navigasi. Di dalam elemen <header>, terdapat elemen <img> yang menampilkan logo situs, elemen <h1> yang menampilkan judul situs, elemen <p> yang menampilkan deskripsi singkat tentang situs, dan elemen <nav> yang menampilkan menu navigasi.

Elemen <nav> HTML

<nav>
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </nav>

Elemen <article> HTML

<article>
  <h2>Judul Artikel</h2>
  <p>Isi paragraf 1</p>
  <p>Isi paragraf 2</p>
</article>

Pada contoh di atas, elemen <article> digunakan untuk mengelompokkan konten artikel yang berdiri sendiri. Di dalam elemen <article>, terdapat elemen HTML <h2> yang menampilkan judul artikel dan elemen <p> yang menampilkan isi artikel.

Elemen <section> HTML

<section>
  <h2>Bagian Fitur</h2>
  <article>
    <h3>Fitur 1</h3>
    <p>Ini adalah penjelasan tentang fitur 1.</p>
  </article>
  <article>
    <h3>Fitur 2</h3>
    <p>Ini adalah penjelasan tentang fitur 2.</p>
  </article>
</section>

Pada contoh di atas, elemen <section> mengelompokkan konten tentang bagian fitur dari halaman web. Dalam elemen <section>, terdapat dua elemen <article>, masing-masing mengandung penjelasan tentang fitur yang berbeda. Elemen <section> sangat berguna untuk memecah halaman web menjadi bagian-bagian yang lebih kecil dan terorganisir, sehingga memudahkan pengguna untuk menavigasi halaman dan memahami konten yang tersedia.

Elemen <aside> HTML

<article>
  <h2>Judul Artikel</h2>
  <p>Isi artikel...</p>
  <aside>
    <h3>Artikel Terkait</h3>
    <ul>
      <li><a href="#">Judul Artikel Terkait 1</a></li>
      <li><a href="#">Judul Artikel Terkait 2</a></li>
      <li><a href="#">Judul Artikel Terkait 3</a></li>
    </ul>
  </aside>
</article>

Pada contoh di atas, elemen <aside> digunakan untuk menunjukkan bagian dari halaman web yang berisi konten pendukung atau konten yang tidak terlalu penting secara visual terhadap konten utama halaman web. Di dalam elemen <aside>, terdapat elemen HTML <h3> yang menampilkan judul konten pendukung dan elemen <ul> yang menampilkan daftar artikel terkait.

Elemen <details> dan <sumary> HTML

<details>
  <summary>Informasi Tambahan</summary>
  <p>Ini adalah informasi tambahan yang akan muncul secara default.</p>
</details>

Informasi Tambahan

Ini adalah informasi tambahan yang akan muncul secara default.

Semua tag <details> harus memiliki tag <summary> di dalamnya, yang digunakan untuk menampilkan teks yang dapat diklik untuk membuka atau menutup konten terperinci.

Elemen <main>HTML

<main>
  <section>
    <h2>Bagian Pengenalan</h2>
    <p>Ini adalah paragraf yang menjelaskan tentang halaman web ini.</p>
  </section>
  <section>
    <h2>Bagian Fitur</h2>
    <article>
      <h3>Fitur 1</h3>
      <p>Ini adalah penjelasan tentang fitur 1.</p>
    </article>
    <article>
      <h3>Fitur 2</h3>
      <p>Ini adalah penjelasan tentang fitur 2.</p>
    </article>
  </section>
</main>

Pada contoh di atas, elemen <main> menandai area utama dari halaman web, dan terdiri dari dua elemen <section> yang masing-masing berisi konten yang berbeda. Elemen <main> sangat berguna untuk membantu mesin pencari, pembaca layar, dan pengguna lainnya untuk menemukan konten utama dari halaman web. Selain itu, elemen <main> juga dapat meningkatkan aksesibilitas dan SEO dari halaman web.

Elemen <footer>HTML

<footer>
  <address>
    Alamat: Jalan Udayana no 11 Singaraja - Bali, Indonesia
  </address>
  <p>&copy; 2023 My Website. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="#">Tentang Kami</a></li>
      <li><a href="#">Kontak</a></li>
      <li><a href="#">Kebijakan Privasi</a></li>
    </ul>
  </nav>
</footer>

Pada contoh di atas, elemen <footer> menunjukkan bagian bawah dari halaman web, dan terdiri dari beberapa elemen HTML, seperti elemen <address> yang berisi alamat, elemen <p> yang berisi hak cipta, dan elemen <nav> yang berisi tautan ke halaman terkait.

Elemen <figure> dan <figcaption> HTML

<figure>
  <video src="video.mp4" controls></video>
  <figcaption>Ini adalah deskripsi dari Video 1.</figcaption>
</figure>

Pada contoh di atas, elemen <figure> menunjukkan sebuah video yang diberi deskripsi atau keterangan. Di dalam elemen <figure>, terdapat dua elemen HTML, yaitu elemen <video> dan elemen <figcaption>, yang berisi video dan deskripsi.